<script setup lang="ts">
import { message } from 'ant-design-vue'
import { updateUserInfo } from '~/api/account.js'

let { personalInfo, asyncUserInfo } = $(useUser())

let formData = $ref({ ...personalInfo })

/**
 * 编辑
 */
let disabled = $ref(true)
const edit = () => {
  disabled = !disabled
}

/**
 * 保存
 */
const save = async () => {
  const data = await updateUserInfo({ ...formData })
  if (data.code === 0) {
    disabled = !disabled
    await asyncUserInfo()
    formData = {
      ...formData,
      ...personalInfo
    }
    message.success('保存成功')
  }
}

/**
 * 取消
 */
const cancel = () => {
  disabled = !disabled
  Object.assign(formData, personalInfo)
}
</script>

<template>
  <div class="BasicInfor">
    <div class="username">
      <span>昵称</span>
      <input v-model="formData.username" :disabled="disabled" :class="[!disabled && 'notDisable']" />
    </div>
    <div class="sex">
      <span>性别</span>
      <span v-show="disabled">{{ ['女', '男'][formData.sex] }}</span>
      <a-radio-group v-model:value="formData.sex" v-show="!disabled">
        <a-radio :value="1">男</a-radio>
        <a-radio :value="0">女</a-radio>
      </a-radio-group>
    </div>
    <div class="city">
      <span>城市</span>
      <input v-model="formData.city" :disabled="disabled" :class="[!disabled && 'notDisable']" />
    </div>
    <div class="autograph">
      <span>签名</span>
      <input v-model="formData.slogan" :disabled="disabled" :class="[!disabled && 'notDisable']" />
    </div>
    <div class="button">
      <button class="btn center-text-34 color-white w-100px" bg="#f38e48" @click="edit" v-show="disabled">编辑</button>
      <div v-show="!disabled">
        <button btn text-14px color-white w-100px center-text-34 bg="#f38e48" @click="save">保存</button>
        <button btn text-14px color-white w-100px center-text-34 ml-40px b="#f38e48" class="cancel" @click="cancel">
          取消
        </button>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.BasicInfor {
  margin-left: 40px;
  margin-top: 30px;

  .button {
    margin-left: 150px;
  }

  input {
    color: #555555;
    font-size: 16px;
    width: 240px;
    background-color: #fff !important;
  }

  span {
    color: #7f7f7f;
    font-size: 16px;
    margin-right: 130px;
  }

  .notDisable {
    padding: 0 10px;
    border-radius: 4px;
    border: 1px solid #d7d7d7;
  }

  &>div:not(:last-child) {
    margin-bottom: 46px;
  }
}
</style>
